<template>
	<view class="index-page">
		<!-- <view class="zhan1"></view> -->
		<!-- <view class="img-box">
			<image mode="widthFix" src="/static/img/icon.png" class="icon"></image>
		</view> -->
		<!-- <view class="zhan1" style="background:#ffffff"></view> -->
		<view class="input-box">
			<input :placeholder="placeholder" class="main-input iconfont" placeholder-style="color:#666666;"
				@focus="goSelect">
		</view>
		<view class="menu-box">
			<span class="item" v-for="(item,index) in list" :class="item.addClass"
				@tap="select(index)">{{item.name}}</span>
		</view>
		
<!-- 		<scroll-view class="main-content" :refresher-enabled='refresherEnabled'
		     @refresherpulling="onPulling"
		     @refresherrefresh="onRefresh"
		     @refresherrestore="onRestore"
		     @refresherabort="onAbort"
		     :refresher-triggered="triggered" scroll-y @scrolltolower="loadMore" > -->
			 
		<scroll-view class="all-data" :refresher-enabled='refresherEnabled'
		     @refresherpulling="onPulling"
		     @refresherrefresh="onRefresh"
		     @refresherrestore="onRestore"
		     @refresherabort="onAbort"
		     :refresher-triggered="triggered" scroll-y v-show="active==0">
			<view class="swiper-main">
				<uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
					<swiper class="swiper-box" @change="change" :autoplay="true" :interval="3000">
						<swiper-item v-for="(item, index) in info" :key="index">
							<view :class="item.colorClass" class="swiper-item">
								<image class="image" :src="item.pictureUrl" mode="widthFix"/>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="all-menu">
				<view class="item" v-for="(item,index) in menuList" @tap="goContent(item)">
					<span class="iconfont " :class="item.icon"></span>
					<span class="text">{{item.name}}</span>
				</view>
			</view>
			<view class="main-content">
				<view class="top">
					<span class="text"><i class="iconfont iconxuexi"></i>　培训课程</span>
					<span class="more" @tap="select(1)">查看全部 > </span>
				</view>
				<view class="item" v-for="(item,index) in courseList"
					@tap="goPage('../course/content?id='+item.privateId)">
					<image :src="item.photo" class="img">
					</image>
					<view class="courseTypeLabel">{{item.courseTypeLabel}}</view>
					<view class="right">
						<span class="title">{{item.courseName}}</span>
						<span class="number">总学时:{{item.classHours}}</span>
						<span class="iconfont " style="color:#1783dd">

							<!-- <span  v-if="item.courseType=='1'" >点播课程</span>
						<span  v-if="item.courseType=='10'">第三方课程</span> -->
						</span>
						<span class="iconfont iconren2">
							{{item.studyCount}}

						</span>

						<view class="go" @tap.stop="goPage('../course/content?id='+item.privateId)">查看课程</view>
					</view>
				</view>
			</view>
			<!-- <view class="main-content" style="padding-right:0;">
				<view class="top" style="padding-right:30rpx;box-sizing:border-box;">
					<span class="text">培训动态</span>
					<span class="more" @tap="select(2)">查看全部 <i class="iconfont icongengduo1"></i> </span>
				</view>
				<view class="news-main" id="news-main" data-src="news-main">
					<view class="news-content">
						<view class="news-item" v-for="(item,index) in newsList" @tap="goPage('newsContent?id='+item.id)">
							<span class="name">{{item.title}}</span>
							<span class="time iconfont iconrili" :class="item.icon">{{item.createDate}}</span>
						</view>
					</view>
				</view> 
			</view> -->
			<view class="main-content">
				<view class="top">
					<span class="text"><i class="iconfont iconxinwen"></i>新闻资讯</span>
					<span class="more" @tap="goPage('allNotice')">查看全部 > </span>
				</view>
				<view class="item" v-for="(item,index) in newsrecList"
					@tap="goPage('../index/noticeContent?id='+item.id)">
					<!-- <image :src="item.photo" class="img"></image> -->
					<view class="left-top">
						<view class="top">
							<image class="newsimg" src="../../static/img/newImg.png"></image>
							<span class="title">{{item.title}}</span>
						</view>
						<!-- <view class="time">
							{{item.updateDate}}
						</view> -->
					</view>
					<view class="showDetail">
						<view class="go1">{{item.updateDate}}</view>
					</view>
				</view>
				<!-- <view class="ind-content" >
					<h3 class="text">{{title1}}</h3>
					<p class="main-data">{{content1}}</p>
					<image src="/static/img/banner.jpg" mode="widthFix" class="banner"></image>
				</view> -->
			</view>
		</scroll-view>
		<scroll-view :refresher-enabled='refresherEnabled'
		     @refresherpulling="onPulling"
		     @refresherrefresh="onRefresh1"
		     @refresherrestore="onRestore1"
		     @refresherabort="onAbort"
		     :refresher-triggered="triggered1" scroll-y @scrolltolower="loadMore1" class="all-data" v-show="active==1" style="overflow:hidden;">
			<view class="main-content" style="margin-top:0;padding-top:0;display:flex;flex-wrap:wrap;">
				<!-- <view class="top">
					<span class="text">培训课程</span>
					<span class="more">查看全部 <i class="iconfont icongengduo1"></i> </span>
				</view> -->
				<view class="item" v-for="(item,index) in courseList1"
					@tap="goPage('../course/content?id='+item.privateId)">
					<image :src="item.photo" class="img"></image>
					<view class="courseTypeLabel">{{item.courseTypeLabel}}</view>
					<view class="right">
						<span class="title">{{item.courseName}}</span>
						<span class="number">总学时:{{item.classHours}}</span>
						<span class="iconfont " style="color:#1783dd">

							<!-- <span  v-if="item.courseType=='1'" >点播课程</span>
						<span  v-if="item.courseType=='10'">第三方课程</span> -->
						</span>
						<span class="iconfont iconren2">{{item.studyCount}}</span>
						<view class="go" @tap.stop="goPage('../course/content?id='+item.privateId)">查看课程</view>
					</view>
				</view>
				<view class="end-text" v-show="start1 && end1 &&courseList1.length!=0">暂无更多数据...</view>
				<button class="end-text uni-icons " v-show="load1" loading="true">数据加载中...</button>
			</view>
		</scroll-view>
		<scroll-view scroll-y @scrolltolower="loadMore2" class="all-data" v-show="active==2" style="overflow:hidden;">
			<view class="main-content" style="margin-top:0;padding-top:0;display:flex;flex-wrap:wrap;padding-right:0;">
				<!-- <view class="top">
					<span class="text">培训动态</span>
					<span class="more">查看全部 <i class="iconfont icongengduo1"></i> </span>
				</view> -->
				<view class="news-main" id="news-main" data-src="news-main">
					<view class="news-content">
						<view class="news-item" v-for="(item,index) in newsList1"
							@tap="goPage('newsContent?id='+item.id)">
							<span class="name">{{item.title}}</span>
							<span class="time iconfont" :class="item.icon">{{item.time}}</span>
						</view>
						<view class="end-text" v-show="start2 && end2 &&newsList1.length!=0">暂无更多数据...</view>
						<button class="end-text uni-icons " v-show="load2" loading="true">数据加载中...</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	export default {
		components: {
			uniSwiperDot
		},
		data() {
			return {
				// 开启下拉
				  refresherEnabled: true,
				  //
				  triggered: false,
				  triggered1: false,
				title: 'Hello',
				newsList: [{
						title: '习近平为何在辽宁代表团问这些问题?',
						icon: 'iconrili',
						time: '2020-06-20 12:00:00'
					},
					{
						title: '淄博市“流动党校”进农村制度创新改革 走进市“第一书记”派驻村： 沂源县东里镇大沟村',
						icon: 'iconrili',
						time: '2020-06-20 12:00:00'
					},
					{
						title: '这篇随笔是我个人对这种情况解决',
						icon: 'iconrili',
						time: '2020-06-20 12:00:00'
					},
					{
						title: '江远华同志是璧山党校高级讲师，喜欢看书学习、勤于善于思考，马列主义理论知识广泛、功底扎实。',
						icon: 'iconrili',
						time: '2020-06-20 12:00:00'
					},
					{
						title: '这篇随笔是我个人对这种情况解决',
						icon: 'iconrili',
						time: '2020-06-20 12:00:00'
					},
				],
				active: 0,
				courseList: [

				],
				courseList1: [],
				placeholder: '\ue60c 输入内容',
				list: [{
						name: '考培易',
						addClass: 'active'
					},
					{
						name: '培训课程',
						addClass: ''
					},
					// {name:'培训动态',addClass:''},
				],
				menuList: [{
						name: '学习中心',
						icon: 'bg1 iconhuangguan2',
						tab: '../study/index'
					},
					{
						name: '题库练习',
						icon: 'bg8 iconshu4',
						path: 'testList'
					},
					// {name:'继续教育',icon:'bg2 iconjiaoyu1',tab:'education'},
					{
						name: '考试报名',
						icon: 'bg2 iconjiaoyu1',
						path: 'kaoshibaoming'
					},
					{
						name: '帮助中心',
						icon: 'bg10 iconbangzhu',
						path: 'help'
					},
					{
						name: '关于我们',
						icon: 'bg3 iconjidi1',
						path: 'baseContent'
					},
					// {name:'专家团队',icon:'bg4 iconzhuanjia2',path:'expert'},
					// {name:'师资库',icon:'bg5 iconboshi',path:'teacherList'},
					// {name:'培训动态',icon:'bg6 iconxiaoxi',active:2},
					// {name:'培训项目',icon:'bg7 iconxiangmu1',path:'project'},
					
					// {name:'基地专栏',icon:'bg9 iconzhuanlan',path:'column'},
					

				],
				dotsStyles: {},
				current: 0,
				pageSize: 10,
				pageNo: 1,
				pageSize1: 10,
				pageNo1: 1,
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						content: '这篇随笔是我个人对这种情况解决办法的归纳，欢迎各路英雄指教'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
						content: '这篇随笔是我个人对这种情况解决办法的归纳，欢迎各路英雄指教'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
						content: '这篇随笔是我个人对这种情况解决办法的归纳，欢迎各路英雄指教'
					}
				],
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				],
				id: '',
				mode: 'dot',
				type: '',
				load1: false,
				end1: false,
				start1: false,
				load2: false,
				end2: false,
				start2: false,
				newsList1: [],
				title1: '',
				content1: '',
				newsrecList: [],
			}
		},
		onLoad() {
			// setTimeout(function() {
			// 	console.log('start pulldown');
			// }, 1000);
			// uni.startPullDownRefresh();
			this.getData();
			this.getList();
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.pageNo = 1;
			this.pageNo1 = 1;
			this.end = false;
			// this.$refs.drawer.close();
			// this.courseList = [];
			this.getData();
			this.getList();

			this.scrollTop = this.oldscrollTop
			this.$nextTick(function() {
				this.scrollTop = 0
			});
			// setTimeout(function () {
			// 	uni.stopPullDownRefresh();
			// }, 1000);
		},
		// onPullDownRefresh() {
		// 	console.log('refresh');
		// 	setTimeout(function () {
		// 		uni.stopPullDownRefresh();
		// 	}, 1000);
		// },
		methods: {
			onPulling (e) {
			},
			//松手后执行下拉事件的函数
			onRefresh () {
			  if (this._freshing) return;
			  this.triggered = 'restore';
			  setTimeout(() => {
			    this.triggered = false;
			    this._freshing = false;
			  }, 1000)
			  //获取数据的函数
			this.pageNo = 1;
			this.pageNo1 = 1;
			this.end1 = false;
			// this.$refs.drawer.close();
			// this.courseList = [];
			this.getData();
			this.getList();
			uni.hideLoading()
			 // uni.showLoading({
			 // 	title:'数据加载中'
			 // })
			 // setTimeout(()=>{
			 // 	this.getList();
			 // },1000)		
			},
			onRefresh1() {
			  if (this._freshing) return;
			  this.triggered1 = 'restore';
			  setTimeout(() => {
			    this.triggered1 = false;
			    this._freshing = false;
			  }, 1000)
			  //获取数据的函数
			this.pageNo = 1;
			this.pageNo1 = 1;
			this.end1 = false;
			// this.$refs.drawer.close();
			// this.courseList = [];
			this.getData();
			this.getList();
			uni.hideLoading()
			 // uni.showLoading({
			 // 	title:'数据加载中'
			 // })
			 // setTimeout(()=>{
			 // 	this.getList();
			 // },1000)		
			},
			//开始结束下拉的函数
			onRestore () {
			  this.triggered = 'restore'; // 关闭动画
			},
			onRestore1 () {
			  this.triggered1 = 'restore'; // 关闭动画
			},
			//结束下拉函数
			onAbort () { },
			loadMore1() {
				
				if (!this.load1 && !this.end1) {
					this.load1 = true;
					this.pageNo = this.pageNo + 1;
					// setTimeout(() => {
					// 	this.getList();
					// 	uni.hideLoading()
					// }, 1000)
					this.getList();
					uni.hideLoading()
				}
			},
			loadMore2() {
				if (!this.load2 && !this.end2) {
					this.load2 = true;
					this.pageNo1 = this.pageNo1 + 1;
					setTimeout(() => {
						this.getNews();
					}, 1000)
				}
			},
			getData1() {
				let that = this;
				this.$http.post("/f/pageIndexNews?pageNo=1&pageSize=2")
					.then(function(response) {
						that.content1 = response.data[0].introduction;
						that.title1 = response.data[0].title;
					})
					.catch(function(error) {
						console.log(error);
					})
			},
			getNews() {
				let that = this;
				this.$http.get("/f/pageNews?pageNo=" + this.pageNo1 + "&pageSize=" + this.pageSize1 + "&classifyId=" + this
						.type)
					.then(function(response) {
						let list = response.data.dtoPage.list;
						
						if(that.pageNo1 == 1){
							that.newsList1 = list;
						}
						else{
							that.newsList1 = that.newsList1.concat(list);
						}
						
						// that.newsList1 = that.newsList1.concat(list);
						
						that.start2 = true;
						if (that.newsList1.length == response.data.dtoPage.count) {
							that.end2 = true;
						}
						that.load2 = false;


					})
					.catch(function(error) {
						// handle error
						console.log(error);
					})
			},

			getData() {
				let that = this;
				this.$http.get("/f/index")
					.then(function(response) {					
						let a = [];
						let bannerList = response.data.bannerList;
						bannerList.forEach((item, i) => {
							item.pictureUrl = that.$url + item.pictureUrl;
						})
						that.info = bannerList;
						console.log(bannerList, 55)
						let trainList = response.data.courseRecList.list;
						let arr = [];
						if (trainList) {

							trainList.forEach((item, i) => {
								item = Object.assign(item, item.courseInfo);
								item.photo = that.$url + item.photo;
								if (i < 8) {
									arr.push(item)
								}
							})
							// var num = trainList.length%4;
							// if(num!=0){
							//   var len1 = 4-num;
							//   for(var i=0;i<len1;i++){
							//       var obj={addClass:"none-shaow"};
							//       trainList.push(obj);
							//   }
							// }
						}
						console.log(arr, 190)
						that.courseList = arr;

						//新闻列表
						let list1 = response.data.educationNoticeList.data;
						let arr1 = [];
						list1.forEach((item, i) => {
							let str = item.updateDate.split(" ");
							item.updateDate = str[0];
							if (i < 8) {
								arr1.push(item)
							}
						})
						that.newsrecList = arr1;
						uni.stopPullDownRefresh()
						console.log(that.newsrecList, 6666666)
						console.log(trainList)
					})
					.catch(function(error) {
						// handle error
						console.log(error);
					})
			},
			getList() {
				let that = this;
				this.$http.get("/f/coursePage?" + "&pageNo=" + this.pageNo + "&pageSize=" + this.pageSize)
					.then(function(response) {
						let list = response.data.coursePage.list;
						that.total = response.data.coursePage.count;
						if (list.length != 0) {
							list.forEach((item, i) => {
								item = Object.assign(item, item.courseInfo);
								item.photo = that.$url + item.photo;
							})
						}
						
						if(that.pageNo == 1){
							that.courseList1 = list;
						}
						else{
							that.courseList1 = that.courseList1.concat(list);
						}
						
						// that.courseList1 = that.courseList1.concat(list);
						
						
						that.start1 = true;
						if (that.courseList1.length == response.data.coursePage.count) {
							that.end1 = true;
						}
						that.load1 = false;
					})
					.catch(function(error) {
						// handle error
						console.log(error);
					})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			goContent(item) {
				if (item.path) {
					uni.navigateTo({
						url: item.path
					});
				}
				if (item.active) {
					this.select(item.active)
				}
				if (item.tab) {
					uni.switchTab({
						url: item.tab
					})
				}
			},
			change(item) {
				this.current = item.detail.current;
			},
			goSelect() {
				uni.navigateTo({
					url: 'search'
				});
			},
			select(index) {
				if (index != 2) {
					this.active = index;
					this.list.forEach((item, i) => {
						if (i == index) {
							item.addClass = "active"
						} else {
							item.addClass = ""
						}
					})
				}

			}
		}
	}
</script>

<style lang="less">
	.index-page {
		width: 100%;
		height: 100%;
		background: #f7f7f7;
		overflow-y: auto;

		.main-content {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			padding-bottom: 30rpx;
			background: #ffffff;
			margin-top: 30rpx;

			.ind-content {
				width: 100%;


				display: block;
				margin: 30rpx auto;
				position: relative;

				.text {
					position: absolute;
					width: 100%;
					line-height: 40rpx;
					top: 40rpx;
					font-size: 36rpx;
					color: #fff;
					text-align: center;
					left: 0;
					z-index: 999;
					box-sizing: border-box;
					padding: 0 40rpx;
				}

				.main-data {
					box-sizing: border-box;
					padding: 0 60rpx;
					width: 100%;
					line-height: 40rpx;
					font-size: 30rpx;
					color: #fff;
					position: absolute;
					left: 0;
					top: 120rpx;
					z-index: 999;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 7;
					overflow: hidden;
				}
			}

			.banner {
				width: 100%;
				display: block;
			}

			.news-main {
				width: 100%;

				.news-content {
					width: 100%;
					box-sizing: border-box;
					padding-left: 0rpx;

					.news-item {
						width: 100%;
						border-bottom: 1px #d0d0d0 dashed;
						padding-bottom: 20rpx;
						padding-top: 20rpx;

						.name {
							width: 95%;
							display: block;
							line-height: 40rpx;
							font-size: 30rpx;
							color: #555555;

						}

						.time {
							width: 100%;
							display: block;
							line-height: 40rpx;
							font-size: 28rpx;
							color: #999999;
							overflow: hidden;
							margin-top: 10rpx;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.time:before {
							color: #1783dd;
							font-size: 40rpx;
							margin-right: 10rpx;
							position: relative;
							top: 4rpx;
						}

						.iconzuozhe:before {
							font-size: 36rpx;
						}
					}

					.news-item:last-child {
						border: 0;
					}
				}

				.news-top {
					width: 100%;
					height: 70rpx;
					background: #fbdcdc;
					box-sizing: border-box;
					padding: 0 40rpx;
					line-height: 70rpx;
					font-size: 30rpx;
					color: #d01515;
				}

				.news-top:before {
					margin-right: 16rpx;
					font-size: 34rpx;
				}
			}

			.item {
				width: 100%;
				display: flex;
				margin: 15rpx 0;
				position: relative;
				border-bottom: 1px dashed #dddddd;

				.courseTypeLabel {
					width: 260rpx;
					position: absolute;
					top: 0;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					text-align: center;
					// background: #0076CA;
					background: rgba(0, 118, 202, 0.5);
					color: #FFFFFF;
					// opacity:0.5;
				}

				.img {
					width: 260rpx;
					height: 180rpx;
					margin-right: 30rpx;
					border-radius: 10rpx;
				}

				.left-top {
					width: calc(100% - 160rpx);
					display: flex;
					flex-direction: column;

					.top {
						width: 100%;
						display: flex;

						.newsimg {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}

						.title {
							width: 100%;
							display: table-cell;
							vertical-align: top;
							line-height: 40rpx;
							height: 40rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 28rpx;
							color: #444444;
							// margin-top:10rpx;
						}
					}

					.time {
						font-size: 28rpx;
						padding-left: 40rpx;
					}

				}

				.showDetail {
					display: table-cell;
					vertical-align: middle;

					.go1 {
						// position:absolute;
						display: inline-block;
						float: right;
						width: 160rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border-radius: 6rpx;
						font-size: 28rpx;
						color: black;
						background: #FFFFFF;
						bottom: 20rpx;
					}
				}

				.right {
					width: calc(100% - 290rpx);
					position: relative;

					.go {
						position: absolute;
						width: 160rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border-radius: 6rpx;
						font-size: 28rpx;
						color: #fff;
						background: #1783dd;
						right: 0rpx;
						bottom: 20rpx;
					}

					.title {
						width: 100%;
						display: block;
						line-height: 40rpx;
						height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 32rpx;
						color: #444444;
						margin-top: 10rpx;
					}

					.number {
						width: 100%;
						display: block;
						line-height: 30rpx;
						height: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 28rpx;
						color: #666666;
						margin-top: 5rpx;
					}

					.iconfont {
						width: 100%;
						display: block;
						line-height: 30rpx;
						height: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 28rpx;
						color: #666666;
						margin-top: 16rpx;
					}

					.iconfont:before {
						font-size: 34rpx;
						margin-right: 6rpx;
					}
				}
			}

			.top {
				display: flex;
				width: 100%;
				height: 60rpx;
				align-items: center;
				justify-content: space-between;

				.text {
					font-size: 36rpx;
					color: #1783dd;
				}

				.more {
					font-size: 28rpx;
					line-height: 60rpx;
					display: flex;
					align-items: center;
					color: #555555;

					.iconfont {
						margin-left: 6rpx;
						line-height: 62rpx;
						font-size: 38rpx;
					}
				}
			}
		}

		.all-menu {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			background: #ffffff;

			.item {
				width: 120rpx;

				.iconfont {
					width: 100rpx;
					height: 100rpx;
					margin: 0 auto;
					border-radius: 50%;
					line-height: 100rpx;
					text-align: center;
					font-size: 44rpx;
					color: #fff;
					display: block;
				}

				.text {
					width: 100%;
					line-height: 60rpx;
					display: block;
					text-align: center;
					font-size: 28rpx;
					color: #555555;
				}

				.bg1 {
					background-image: linear-gradient(to right, #05abfe, #04a4fc);
				}

				.bg2 {
					background-image: linear-gradient(to right, #f86257, #fe2c37);
				}

				.bg3 {
					background-image: linear-gradient(to right, #0eabf9, #04a1fe);
					font-size: 50rpx;
				}

				.bg4 {
					background-image: linear-gradient(to right, #fb6761, #f43d6e);
				}

				.bg5 {
					background-image: linear-gradient(to right, #af62fe, #9452f6);
				}

				.bg6 {
					background-image: linear-gradient(to right, #f7cb1a, #fdb409);
				}

				.bg7 {
					background-image: linear-gradient(to right, #fd7a33, #fe570b);
				}

				.bg8 {
					background-image: linear-gradient(to right, #51d31b, #64b44b);
				}

				.bg9 {
					background-image: linear-gradient(to right, #1fa4fa, #7ea2fc);
				}

				.bg10 {
					background-image: linear-gradient(to right, #189df1, #0474c6);
					font-size: 52rpx;
				}
			}
		}

		.swiper-main {
			width: 100%;
			height: 330rpx;

			.uni-swiper__warp {
				height: 100%;

				.swiper-box {
					height: 100%;

					.image {
						width: 100%;
						height: 330rpx;
					}
				}
			}
		}

		.all-data {
			width: 100%;
			height: calc(100% - 160rpx);
			overflow-y: auto;
		}

		.menu-box {
			width: 100%;
			box-sizing: border-box;
			padding: 0 50rpx;
			background: #ffffff;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #e6e6e6;
			position: relative;
			height: 70rpx;

			.item {
				line-height: 70rpx;
				padding: 0 80rpx;
				position: relative;
				color: #555555;
				font-size: 30rpx;

			}

			.active {
				color: #1783dd;
			}

			.active:after {
				content: '';
				position: absolute;
				width: 60%;
				left: 20%;
				bottom: 4rpx;
				height: 6rpx;
				background: #1783dd;
			}
		}

		.img-box {
			width: 100%;

			.icon {
				width: 100%;
				height: 120rpx !important;
				display: block;
			}
		}

		.input-box {
			width: 100%;
			position: relative;
			z-index: 9;
			padding-top: 20rpx;
			padding-bottom: 10rpx;
			background: #ffffff;
		}

		.main-input {
			width: 650rpx;
			margin: 0 auto;
			height: 60rpx;
			border-radius: 30rpx;
			background: #f4f4f4;
			font-size: 28rpx;
			line-height: 60rpx;
			position: relative;
			box-sizing: border-box;
			padding: 0 60rpx;
			text-align: center;
		}
	}
</style>
